<template>
	<!-- 通用视图层 -->
	<view class="watermark-container" >
		<!-- H5/小程序使用canvas -->
		<!-- #ifndef APP-NVUE -->
		<canvas
			:id="canvasId"
			:canvas-id="canvasId"
			class="watermark-canvas"
			:style="{ width: sysWidth + 'px', height: sysHeight + 'px' }"
		></canvas>
		<!-- #endif -->

		<!-- APP-NVUE使用absolute布局 -->
		<!-- #ifdef APP-NVUE -->
		<view class="nvue-watermark" :style="nvueStyle">
			<image v-if="isImageMode" :src="content" class="watermark-item"></image>
			<text v-else class="watermark-item">{{ content }}</text>
		</view>
		<!-- #endif -->
	</view>
</template>

<script setup>
import { ref, computed, onMounted, watch, nextTick, getCurrentInstance } from 'vue';
/**
 * lrl-watermark 全屏水印
 * @description LrlWatermark 全屏水印
 * @author ruilin
 * @property {String}            content                   文字内容或图片URL     
 * @property {Boolean}           isImage                   是否为图片水印      
 * @property {Number}            angle                     旋转角度
 * @property {Number}            opacity                   透明度0-1
 * @property {Number}            fontSize                  文字大小(px)
 * @property {String}            color                     文字颜色
 * @property {Number}            density                   水印密度(px)
 * @example <lrl-watermark></lrl-watermark>
 */
const props = defineProps({
	content: { type: String, default: 'Watermark' }, // 文字内容或图片URL
	isImage: { type: Boolean, default: false }, // 是否为图片水印
	angle: { type: Number, default: -20 }, // 旋转角度
	opacity: { type: Number, default: 0.3 }, // 透明度0-1
	fontSize: { type: Number, default: 16 }, // 文字大小(px)
	color: { type: String, default: '#999999' }, // 文字颜色
	density: { type: Number, default: 30 } // 水印密度(px)
});

const canvasId = 'watermarkCanvas_' + Math.random().toString(36).substr(2);
const sysInfo = uni.getSystemInfoSync();
const sysWidth = ref(sysInfo.windowWidth * 2);
const sysHeight = ref(sysInfo.windowHeight * 2);
const instance = getCurrentInstance()

// NVUE样式计算
const nvueStyle = computed(() => ({
	position: 'absolute',
	top: 0,
	left: 0,
	right: 0,
	bottom: 0,
	'z-index': 9999,
	'background-color': 'transparent',
	'pointer-events': 'none'
}));

// 初始化水印
const initWatermark = async () => {
	// #ifndef APP-NVUE
	nextTick(() => {
		drawCanvasWatermark();
	})
	// #endif

};

// 绘制Canvas水印
const drawCanvasWatermark = () => {
	const ctx = uni.createCanvasContext(canvasId, instance.proxy);
	const density = props.density * 2;
	if (props.isImage) {
		// 图片水印逻辑
		uni.getImageInfo({
			src: props.content,
			success: (res) => {
				const imgWidth = res.width * 0.5;
				const imgHeight = res.height * 0.5;
				const cols = Math.ceil(sysWidth.value / (imgWidth + density));
				const rows = Math.ceil(sysHeight.value / (imgHeight + density));

				for (let i = 0; i < rows; i++) {
					for (let j = 0; j < cols; j++) {
						ctx.save();
						ctx.translate(j * (imgWidth + density), i * (imgHeight + density));
						ctx.rotate((props.angle * Math.PI) / 180);
						ctx.globalAlpha = props.opacity;
						ctx.drawImage(res.path, 0, 0, imgWidth, imgHeight);
						ctx.restore();
					}
				}
				ctx.draw();
			}
		});
	} else {
		// 文字水印逻辑
		ctx.setFontSize(props.fontSize * 2);
		ctx.setFillStyle(props.color);
		ctx.setGlobalAlpha(props.opacity);
		const textWidth = ctx.measureText(props.content).width * 1;
		const textHeight = props.fontSize * 3;

		const cols = Math.ceil(sysWidth.value / (textWidth + density));
		const rows = Math.ceil(sysHeight.value / (textHeight + density));

		for (let i = 0; i < rows; i++) {
			for (let j = 0; j < cols; j++) {
				ctx.save();
				ctx.translate(j * (textWidth + density), i * (textHeight + density));
				ctx.rotate((props.angle * Math.PI) / 180);
				ctx.fillText(props.content, 0, 0);
				ctx.restore();
			}
		}
		
		ctx.draw();
	}
};

// 监听属性变化
watch(
	() => props,
	() => {
		nextTick(initWatermark)
	},
	{ deep: true }
);

onMounted(() => {
	initWatermark();
});
</script>

<style>
/* 通用样式 */
.watermark-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 9999;
}

/* H5/小程序样式 */
.watermark-canvas {
	/* position: absolute; */
}

/* NVUE特殊样式 */
.nvue-watermark {
	flex-direction: row;
	flex-wrap: wrap;
}
.watermark-item {
	margin: 40rpx;
	opacity: 0.15;
	transform: rotate(-20deg);
}
</style>
